<template>
  <div class="LineEchart">
    <h1>折线图</h1>
    <EchartLines
      id="line"
      class="chart-item"
      height="100%"
      width="100%"
      :chart-option="chartOption"
    />
  </div>
</template>

<script>
import EchartLines from '@/components/ChartModule/echarLine.vue'
import { chartOptinSet } from '@/mixins/chartLineOption.js'
export default {
  mixins: [chartOptinSet],
  components: {
    EchartLines
  },
  data () {
    return {
      echartData: [
        {
          "count": 1,
          "time": "2021-09-27"
        },
        {
          "count": 4,
          "time": "2021-10-01"
        },
        {
          "count": 1,
          "time": "2021-10-03"
        },
        {
          "count": 2,
          "time": "2021-10-05"
        },
        {
          "count": 1,
          "time": "2021-10-06"
        },
        {
          "count": 1,
          "time": "2021-10-09"
        },
        {
          "count": 1,
          "time": "2021-10-19"
        },
        {
          "count": 3,
          "time": "2021-10-21"
        },
        {
          "count": 9,
          "time": "2021-10-22"
        },
        {
          "count": 2,
          "time": "2021-10-23"
        },
        {
          "count": 1,
          "time": "2021-10-24"
        },
        {
          "count": 10,
          "time": "2021-10-25"
        },
        {
          "count": 23,
          "time": "2021-10-26"
        },
        {
          "count": 19,
          "time": "2021-10-27"
        },
        {
          "count": 7,
          "time": "2021-10-28"
        },
        {
          "count": 13,
          "time": "2021-10-29"
        },
        {
          "count": 2,
          "time": "2021-10-30"
        },
        {
          "count": 1,
          "time": "2021-11-01"
        }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      const startTime = '2021-10-25';
      const endTime = '2021-11-01';
      const times =  this.getAllDate(startTime,endTime)
      const alltimes = times.map((key)=>({time:key, count:0}))
      const datas =  alltimes.map(item =>{
        const data =  this.echartData.find(key => item.time === key.time)
        return{
          ...item,
          ...data
        }
      })
      this.chartOption.xAxis.data = datas.map(({ time }) => time)
      this.chartOption.series[0].data = datas.map(({ count }) => count)

    },
    format(time){
      let ymd = ''
      let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
      let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
      ymd += time.getFullYear() + '-' // 获取年份。
      ymd += mouth + '-' // 获取月份。
      ymd += day // 获取日。
      return ymd // 返回日期。
    },
    getAllDate (start, end) {
      let dateArr = []
      let startArr = start.split('-')
      let endArr = end.split('-')
      let db = new Date()
      db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
      let de = new Date()
      de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
      let unixDb = db.getTime()
      let unixDe = de.getTime()
      let stamp
      const oneDay = 24 * 60 * 60 * 1000;
      for (stamp = unixDb; stamp <= unixDe;) {
        dateArr.push(this.format(new Date(parseInt(stamp))))
        stamp = stamp + oneDay
      }
      return dateArr
    }

  }

}
</script>

<style scoped>
.LineEchart {
  height: 400px;
  position: relative;
}
</style>